<template>
  <view class="commonLim-list">
    <view class="searchclass">
      <up-search
        v-model="state.query.name"
        :placeholder="titleName"
        :clearabled="true"
        :showAction="false"
        @search="handleSearch"
      />
      <view class="right">
        <up-button
          type="primary"
          @click="handleSearch"
          class="first"
          size="small"
          shape="circle"
          >搜索</up-button
        >
        <up-button
          type="primary"
          @click="handlecancel"
          size="small"
          shape="circle"
          >重置</up-button
        >
      </view>
    </view>
    <scroll-view
      class="caizhiOrGuige"
      scroll-y
      @scrolltolower="onScrollToBottom"
    >
      <view v-show="state.rows.length">
        <view
          v-for="item in state.rows"
          :key="item.id"
          class="box"
          @click="handleSure(item)"
        >
          {{ item.label }}
        </view>
      </view>
      <up-empty mode="data" v-show="state.rows.length == 0"> </up-empty>
      <up-loadmore
        v-if="state.rows.length"
        :status="loadStatus"
        :icon="true"
        loadmore-text="轻轻上拉获取更多"
        loading-text="努力加载中..."
        nomore-text="没有更多了"
        @loadmore="handleloadMore"
        style="margin-bottom: 20rpx"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { hertLists, textureSpecificationsgetPid } from "./api.js";
import { useMemberStore } from "@/stores/modules/member";
import { computed, reactive, ref } from "vue";
const memberStore = useMemberStore();
const deprops = defineProps(["from", "pId"]);
const titleName = computed(() => {
  return deprops.from === "caizhi"
    ? "请输入材质"
    : deprops.from === "guigexinghao"
    ? "请输入规格型号"
    : "";
});
const state = reactive({
  rows: [{}],
  totals: 0,
  query: {
    page: 1,
    size: 15,
  },
});
const loadStatus = ref("loadmore");
const requestFn = async () => {
  if (deprops.from === "caizhi") {
    const res1 = await hertLists(state.query);
    if (res1.code == 1) {
      const lists = res1.data.content.map((item) => ({
        value: item.id,
        label: item.textureName,
      }));
      state.rows = [...state.rows, ...lists];
      state.totals = res1.data.totalElements;
    }
  } else if (deprops.from === "guigexinghao") {
    state.query.pId = deprops.pId;
    const res1 = await textureSpecificationsgetPid(state.query);
    if (res1.code == 1) {
      const lists = res1.data.content.map((item) => ({
        value: item.id,
        label: item.specifications,
      }));
      state.rows = [...state.rows, ...lists];
      state.totals = res1.data.totalElements;
    }
  }
  if (state.rows.length < state.totals) {
    loadStatus.value = "loadmore"; // 仍可继续上拉
  } else {
    loadStatus.value = "nomore"; // 已全部加载
  }
};
const Consistentlogic = async () => {
  try {
    console.log("加载中");
    uni.showLoading({
      title: "加载中",
    });
    state.rows = [];
    state.totals = 0;
    await requestFn();
  } finally {
    uni.hideLoading();
  }
};
const handleSearch = () => {
  state.query.page = 1;
  Consistentlogic();
};
const handlecancel = () => {
  state.query = {
    page: 1,
    size: 15,
  };
  Consistentlogic();
};
const handleSure = (item) => {
  memberStore.from_Page = deprops.from;
  memberStore.zemId = item.value;
  memberStore.zemName = item.label;
  uni.navigateBack({ delta: 1 });
};
const handleloadMore = async () => {
  // 防止重复请求
  if (loadStatus.value === "loading") return;
  loadStatus.value = "loading";
  // 判断是否还有更多数据
  if (state.rows.length < state.totals) {
    loadStatus.value = "loadmore"; // 仍可继续上拉
    state.query.page += 1; // 为下一次请求准备页码
    try {
      await requestFn();
    } catch (error) {
      console.log("加载数据失败", error);
    }
  } else {
    loadStatus.value = "nomore"; // 已全部加载
  }
};
function onScrollToBottom() {
  // 当 scroll-view 触底且状态为 loadmore 时手动调用
  if (loadStatus.value === "loadmore") {
    handleloadMore();
  }
}
onLoad(() => {
  uni.setNavigationBarTitle({
    title: titleName.value,
  });
  handleSearch();
});
</script>

<style lang="scss">
.caizhiOrGuige {
  flex: 1;
  .box {
    padding: 30rpx 0;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
}
</style>